<template>
  <div>
      <header class="fixed top-0 left-0 bg-gray-200 w-full flex  h-10">      
        <button class ="w-16 rounded bg-[rgb(245,240,250)] mr-2 ml-1" @click="startLog">start</button>
        <button class ="w-16 rounded bg-[rgb(245,240,250)] mr-2" @click="stopLog">stop</button>
        <textarea spellcheck="false" v-model="selectedTarget" placeholder="target" class="mr-2 rounded bg-[rgb(241,243,244)] resize-none text-center py-2 w-80"></textarea>
        <SearchComponent placeHolder="module name" @filterKeyword = "handleFilterModule" class="mr-2 w-50"></SearchComponent>
        <SearchComponent placeHolder="filter key word" @filterKeyword = "handleSearchKeyWord" class="ml-auto mr-1 w-70"></SearchComponent>
      </header>
      <main class="fixed top-10 left-0 right-0 bottom-1 overflow-hidden">
          <ViewComponent :dataShow="inputData" :highLightkeyWordProp="highlightKeyword" class="h-full w-full"/>
      </main>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron';
import ViewComponent from './ViewComponent.vue';
import SearchComponent from './SearchComponent.vue';
export default {
  name: 'LogView',
  data(){
    return {
      inputData:"",
      logStartFlag : false,
      searchKeyword : "",
      selectedTarget : "",
      moduleName : "",
      highlightKeyword : "",
    }
  },
  components:{
    ViewComponent,
    SearchComponent,
  },
  mounted(){
    ipcRenderer.on('View::ReceiveLog', (event, data)=>{
      this.inputData = data
    })
    document.addEventListener('keydown', this.handleKeyDown);
    ipcRenderer.on('View::SetSelectedTarget', (event, data)=>{
      console.log('get seleced target')
      this.selectedTarget = data
    })
  },
  beforeUnmount(){
     document.removeEventListener('keydown', this.handleKeyDown);
  },
  methods:{
    handleFilterModule(moduleName){
      console.log('module name', moduleName)
      this.moduleName = moduleName
    },
    handleSearchKeyWord(keyword){
      this.searchKeyword = keyword
    },
    startLog(){
      if(this.logStartFlag) {
        return
      }
 
      if(this.moduleName.length == 0){
        console.log('input filter module name')
        return
      }
      if(this.selectedTarget.length == 0) {
        console.log('select target')
        return
      }
      const param = {
        target: this.selectedTarget,
        moduleName : this.moduleName,
      }
      const jsonData = JSON.stringify(param)
      ipcRenderer.invoke('Ipc::StartLog', jsonData)
      this.logStartFlag = true
    },
    stopLog(){
      if(!this.logStartFlag) {
        return
      }
      ipcRenderer.invoke("Ipc::StopLog")
      this.logStartFlag = false
    },
    handleKeyDown(e) {
      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
        e.preventDefault();
        console.log('Ctrl F')
        this.highLightKeyWord()
      }
  },
    highLightKeyWord(){
      console.log('start highLight keyword')
      this.highlightKeyword = "Report"
    }

  }
}
</script>

<style scoped>

</style>